<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 确保页面在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局示例</title>
	
	<!-- 

代码解释
HTML 部分
页面结构包含 header（头部）、nav（导航栏）、main（主要内容区域）和 footer（底部）。
main 区域内有 section（主要内容）和 aside（侧边栏）。
CSS 部分
全局样式重置：使用 * 选择器将所有元素的内外边距设置为 0，并将盒模型设置为 border-box。
根元素字体大小：设置 html 元素的字体大小为 16px，作为 rem 单位的基准。
页面布局：
header、nav 和 footer 使用固定的样式，为页面提供基本的结构。
main 使用 display: flex 和 flex-wrap: wrap 实现弹性布局。
.main-content 和 .sidebar 使用百分比宽度（弹性单位），根据屏幕大小自适应。
媒体查询：
使用 @media (max-width: 768px) 设置断点，当屏幕宽度小于等于 768px 时，应用特定的样式。
在小屏幕设备上，导航栏变为垂直布局，主要内容和侧边栏都占满宽度。
通过这种方式，页面可以在不同屏幕尺寸的设备上都有良好的显示效果，实现了多端适配。

	-->
 <style>
 /* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* 设置根元素字体大小，作为 rem 单位的基准 */
    font-size: 16px;
}

body {
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

nav ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    background-color: #444;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
}

.main-content {
    /* 使用弹性单位，占据主要宽度 */
    width: 70%;
    padding: 1rem;
}

.sidebar {
    /* 使用弹性单位，占据次要宽度 */
    width: 30%;
    padding: 1rem;
    background-color: #f0f0f0;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

/* 移动优先策略：小屏幕设备样式 */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 0.5rem 0;
    }

    .main-content,
    .sidebar {
        /* 在小屏幕上，主要内容和侧边栏都占满宽度 */
        width: 100%;
    }
}
 
 </style>
</head>

<body>
    <!-- 页面头部 -->
    <header>
        <h1>响应式网站标题</h1>
    </header>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
    <!-- 主要内容区域 -->
    <main>
        <section class="main-content">
            <h2>主要内容</h2>
            <p>这是网站的主要内容部分，它会根据不同的屏幕尺寸自适应显示。在移动设备上，它会以更紧凑的方式呈现，而在大屏幕设备上，会有更宽敞的布局。</p>
        </section>
        <aside class="sidebar">
            <h2>侧边栏</h2>
            <p>这是侧边栏，在小屏幕设备上可能会隐藏或者移动到主要内容下方。</p>
        </aside>
    </main>
    <!-- 页面底部 -->
    <footer>
        <p>版权所有 &copy; 2024</p>
    </footer>
</body>

</html>